<template>
  <!-- 新闻显示的部分 -->
  <div>
    <div class="main-box">
      <ElCard v-for="d in list">
        <template #header>
          <div>
            <div>{{ d.source }}</div>
          </div>
        </template>
        <div>
          <div @click="showDetail(d.nid)">
            {{ d.title }}
          </div>
          <div>{{ Tools.formatDate(d.lastupdate) }}</div>
        </div>
      </ElCard>
    </div>
  </div>

  <!-- 新闻详情对话框 -->
  <ElDialog v-model="dialogDetail">
    <div class="news-box" v-html="detail_info"></div>
  </ElDialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ApiService } from '../api/ApiService'
import { Tools } from '../api/Tools'
import { ElDialog, ElCard, ElMessageBox } from 'element-plus'

//#region 查询的部分

const list = ref([])
const page = ref({
  pageSize: 10,
  pageNumber: 1,
})
const queryInfo = ref({
  title: '',
  info: '',
})

const query = () => {
  ApiService.get('/crud/news', Tools.concatJson(page.value, queryInfo.value), (data: any) => {
    if (data.success) {
      list.value = data.data
      page.value = data.pageBean
    } else {
      ElMessageBox.alert(data.message)
    }
  })
}

const dialogDetail = ref(false)
const detail_info = ref('')

const showDetail = (nid: number) => {
  ApiService.get(`/crud/news/${nid}`, {}, (data: any) => {
    if (data.success) {
      detail_info.value = data.data.info
      dialogDetail.value = true
    } else {
      ElMessageBox.alert(data.message)
    }
  })
}

query()

//#endregion
</script>

<style lang="scss" scoped>
.news-box {
  max-height: 60vh;
  overflow-y: auto;
  word-break: break-all;
  img {
    display: block !important;
    width: 90% !important;
    height: auto !important;
  }
}

.main-box {
  display: flex;
  flex-wrap: wrap;
  .el-card {
    margin: 10px;
    width: 23vw;
    .el-card__body {
      > div {
        > div {
          margin: 0.5rem 0px;
        }
        > div:last-of-type {
          text-align: right;
          color: #666;
        }
        > div:first-of-type {
          text-indent: 2em;
          &:hover {
            color: #9f0a84;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
